<template>
  <!-- 写组件 -->
  <!-- 方式1 通过query传递 -->
  <!-- <van-cell class="article-item" :to="'/article?id='+article.art_id"> -->
  <!-- 方式2 通过动态传参，params传递 -->
   <van-cell class="article-item" :to="{
     name:'article',
     params:{articleId:article.art_id}
     }">
    <!-- 标题 -->
    <div slot="title" class="title van-multi-ellipsis--12">
      {{ article.title }}
    </div>
    <!-- 文章详情和3张图片 -->
    <div slot="label">
      <div v-if="article.cover.type === 3" class="cover-wrap">
        <van-image
          class="cover-item-img cover-item"
          width="100"
          height="100"
          v-for="(item, index) in article.cover.images"
          :key="index"
          :src="item"
        ></van-image>
      </div>
      <div class="label-info-wrap">
        <span>{{ article.aut_name }}</span>
        <span>{{ article.comm_count }}评论</span>
        <span>{{ article.pubdate | relativeTime }}</span>
      </div>
    </div>
    <!-- 右边一张图片 -->
    <van-image
      v-if="article.cover.type === 1"
      slot="default"
      class="cover-item-img"
      width="100"
      height="100"
      :src="article.cover.images[0]"
    ></van-image>
  </van-cell>
</template>

<script>
export default {
  name: 'ArticleItem',
  components: { },
  props: {
    // channel:Object
    article: {
      type: Object,
      require: true
    }
  }
}
</script>

<style>
/* scoped给每一个组件标签加自定义属性 */
/* 注意,在最外面元素前面添加/deep/不起作用 */
/* 默认情况下,父组件不能直接修改子组件样式,必须加/deep/ */
/* 如果子组件样式没有加scoped,那么我们就可以直接修改 */
.title {
  font-size: 32px;
  color: #3a3a3a;
}
.van-cell_value {
  flex: unset;
  width: 232px;
  height: 146px;
  padding-left: 25px;
}
.cover-item-img {
  width: 100%;
  height: 146px;
}

.label-info-wrap span {
  font-size: 22px;
  color: #b4b4b4;
  margin-right: 25px;
}

.cover-wrap {
  display: flex;
}
.cover-item {
  flex: 1;
  height: 146px;
  padding-right: 4px;
}
</style>